import React,{useState} from "react";
import "./index.css";
import { Popup } from "@nutui/nutui-react";
import { CSSTransition } from 'react-transition-group';
export default function Index() {
  const [showBasic, setShowBasic] = useState(false);

  return (
    <div>
      <div className="bgc">
        <div className="header">
          <div style={{ width: "20%" }}>
            <img style={{ width: "100%" }} src="/img/avator.png" alt="" />
          </div>
          <div className="fontsize">
            <div>
              <span>品牌</span>
              <span>粥品香坊（回龙观）</span>
            </div>
            <div>蜂鸟专送/38分钟送达</div>
            <div>在线支付满28减5，满50减10</div>
          </div>
          <div>
            <div
              style={{
                fontSize: "12px",
                border: "1px solid #ccc",
                padding: "5px 10px",
                backgroundColor: "#999999",
                borderRadius: "50%",
              }}
              onClick={() => {
                console.log(1232313);
                setShowBasic(true);
              }}
            >
              5个
            </div>
           
          </div>
        </div>
      </div>
      <CSSTransition in={showBasic} timeout={2000} classNames="popup-fade" unmountOnExit>
            <Popup  visible={ showBasic } style={{ padding: '30px 50px',background:'#ccc',postion:'right' }} onClose={ () => { setShowBasic(false) } }>
              <div>
                <div className='ss'>
                   <div>粥品香坊(回龙观)</div>
                  {/* <div  className='xxs'><StarFill1/><StarFill1/><StarFill1/><StarFill1/><Star11/></div> */}
                  {/* <Star rating={4.5}></Star> */}
                </div>
             
                <div className='xx'>
                    <span>——</span>优惠信息<span>——</span>
                </div>
              
                <div className='nn'>
                    <div>在线支付满28减5，满50减10</div>
                    <div>vc无限橙果汁全场8折</div>
                    <div>单人精彩套餐</div>
                    <div>该商家支持发展，请下单写好发票抬头</div>
                    <div>已加入'外卖保'计划，食品安全保障</div>
                </div>
                <div  className='xx'>
                   <span>——</span>商家公告<span>——</span>
                </div>
               
                <div className='nn'>
                 <div> 粥品香坊其烹饪粥料的秘方源于中国千年古法，在</div>
                 <div>结合现代制作工艺，由世界烹饪大师屈清先生领衔研</div>
                 <div> 发，坚守纯天然，0添加的良心品质深得消费者青</div>
                 <div>睐，发展至今称为粥类的引领品牌，是2008年奥运</div>
                 <div>会和2013年国博会指定餐饮服务商</div>

                </div>
                <div className='k' onClick={()=>{setShowBasic(false)}}>X</div>
                </div>
            </Popup>
            </CSSTransition>
    </div>
  );
}
